<template>
  <router-view v-slot="{ Component, route }">
    <!-- 这里显示正常的组件 -->
    <keep-alive v-show="!route.meta.isInnerLink" :include="cacheRoutes.cachedRoutes">
      <component :is="Component" :key="route.fullPath" />
    </keep-alive>

    <!-- 这里显示缓存的iframe组件 -->
    <div v-show="route.meta.isInnerLink" class="cache-iframe-container">
      <InnerLink :key="`${item.name as any + '_refresh_' + item.meta.refreshCount ? item.meta.refreshCount : 0}`"
        v-for="item in getInnerLinkCachedRoutes" v-show="route.name === item.name"
        :iframeId="(item.meta.props as any).iframeId" :src="(item.meta.props as any).src"></InnerLink>
    </div>
  </router-view>
</template>

<script lang="ts">
import { mapState } from 'pinia'
import useAppConfigStore from '@/store/modules/app-config'
import useCachedRouteStore from '@/store/modules/cached-routes'
import useVisitedRouteStore from '@/store/modules/visited-routes'
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Main',
  setup() {
    const appStore = useAppConfigStore()
    const cacheRoutes = useCachedRouteStore()
    return {
      appStore,
      cacheRoutes,
    }
  },
  computed: {
    ...mapState(useVisitedRouteStore, ['getInnerLinkCachedRoutes']),
  },
})
</script>

<style>
.h-full-vh {
  height: 100vh;
}

.cache-iframe-container {
  height: 100%;
}
</style>
